import L from "leaflet"
import { init, LMap, createTileLayer, predefinedImageTiles, consts, resourceService, IPixelLayerStyleOptions, GridDataGLFillMode, LGridLabelLayer, IGridDataOptions, ensureGridDataOptions, GrayImageGridDataProvider, GridDataType, LPixelLayer } from "quickearth";

init("f17d186a2e692c9f6f2e79e48b270012");
const map = new LMap("map", { crs: L.CRS.EPSG3857, fadeAnimation: false, zoomControl: false }).setView([25.5, 116.5], 7);
const tileLayer = createTileLayer(predefinedImageTiles.windy, { pane: consts.customPanes.topmap.name });
map.addLayer(tileLayer);

const showGridVal = async () => {
    const gridOptions: IGridDataOptions = {
        xStart: 0,
        // xDelta: 0.25,
        xDelta: 0.5,
        // xSize: 1440,
        xSize: 720,
        yStart: 90,
        // yDelta: -0.25,
        yDelta: -0.5,
        // ySize: 721
        ySize: 361
    };
    ensureGridDataOptions(gridOptions);
    const provider = await GrayImageGridDataProvider.fromURL("http://qecloud.91weather.com/public/demos/data/mqe/GFS0P50_20220411020000_precp_single_33300.mqe", false, {
        gridOptions,
        scale: 0.1,
        offset: 0,
        dataType: GridDataType.UInt16,
        algo: 1,
        autoLoadToMemory: true
    });
    const style: IPixelLayerStyleOptions = {
        fillColor: "color-precp#res",
        fillMode: GridDataGLFillMode.pixel1
    };
    const layer = new LPixelLayer({
        debugShowPerformance: true,
        name: "格点降水渐变填色"
    }).setDrawOptions(style).setDataSource(provider);
    map.addLayer(layer);
    const labelLayer = new LGridLabelLayer({
        name: "格点填值",
        ignoreRetina:false
    }).setDrawOptions({
        text: {
            data: "#decimal?len=1",
            // backColor: "rgba(255,255,255,0.2)",
            color: "black",
            strokeWidth:1,
            visible: (val: number) => {
                return val >= 0.01;
            }
            //strokeColor: "white",
            //strokeWidth: 2
        }
    }).setDataSource(provider);
    map.addLayer(labelLayer);
}

const load = async () => {
    await resourceService.loadResourceFromConfigPath("demos/styles/demo.config.json");
    showGridVal();
}

load();